<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理系统</title>
    <link rel="stylesheet" type="text/css" href="{% static 'themes/default/easyui.css'%}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'themes/icon.css'%}"/>
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
        }
        #xxx tr {
            height: 40px;
            margin-bottom: 40px;
        }
        .easyui-layout {
            background-color: #fff0f5;
        }
        h1 {
            margin-left: 55px;
            letter-spacing: 5px;
            color: #ff69b4;
        }
        .easyui-tabs .panel-header {
            background-color: #ff69b4 !important;
            color: white !important;
        }
        .easyui-tabs .tabs-wrap {
            background-color: #ffe4e1;
        }
        .easyui-tabs .tabs li {
            background-color: #ff69b4;
            color: white;
            border-radius: 5px;
        }
        .easyui-tabs .tabs li:hover {
            background-color: #ff85c0;
        }
        .easyui-tabs .tabs li.tabs-selected {
            background-color: #ff85c0;
        }
        .easyui-layout .layout-panel-west {
            background-color: #ffe4e1;
        }
        .easyui-layout .layout-panel-north {
            background-image: url('{% static 'imgs/bg1.png' %}');
            background-color: #ffe4e1;
        }
    </style>
    <script type="text/javascript" src="{% static 'jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'jquery.easyui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'locale/easyui-lang-zh_CN.js' %}"></script>
    <script type="text/javascript">
        $(function(){
            // 初始化树菜单
            var tree_datas = [{
                id: 1, text: '菜单', children: [
                    {id: 11, text: '部门管理', attributes: {href: 'aaa.jsp'}},
                    {id: 12, text: '员工管理', attributes: {href: '{% url 'easyui.emp_list' %}'}},
                    {id: 13, text: '图表管理', attributes: {href: 'ccc.jsp'}}
                ]
            }];
            $("#menu_tree").tree({
                data: tree_datas,
                onClick: function (node) {
                    if (node.attributes) {
                        var href = node.attributes.href;
                        if (href) {
                            if (!$("#main_tabs").tabs('exists', node.text)) {
                                $('#main_tabs').tabs('add', {
                                    title: node.text,
                                    closable: true,
                                    href: href,
                                    style: {margin: '2px'},
                                    tools: [
                                        {
                                            iconCls: 'icon-mini-refresh',
                                            handler: function () {
                                                var panel = $('#main_tabs').tabs('getSelected');
                                                panel.panel('refresh');
                                            }
                                        }
                                    ]
                                });
                            } else {
                                $('#main_tabs').tabs('select', node.text);
                                var $panel = $("#main_tabs").tabs('getTab', node.text);
                                $panel.panel('refresh');
                            }
                        }
                    }
                }
            });
            // 初始化tabs
            $('#main_tabs').tabs({
                onSelect: function (title, index) {
                    var $panel = $(this).tabs('getTab', title);
                    $panel.panel('refresh');
                }
            });

        });
    </script>
</head>
<body class="easyui-layout">
<div data-options="region:'west',title:'菜单'" style="width:180px">
    <ul id="menu_tree"></ul>
</div>
<div data-options="region:'north'" style="height:80px;">
    <h1>员工管理系统</h1>
</div>
<div data-options="region:'center',title:'主界面'">
    <div class="easyui-tabs" id="main_tabs" data-options="fit:true" style="padding:2px">
        <div data-options="title:'显示页'">
            <h3>显示页</h3>
        </div>
    </div>
</div>
</body>
</html>
